<template>
  <div>
    <AModal
      v-bind="$attrs"
      width="800px"
      @close="modalEvent('close')"
      @ok="modalEvent('ok')"
      @open="modalEvent('open')"
      @cancel="modalEvent('cancel')"
    >
      <AForm ref="formRef" :model="form" auto-label-width>
        <ARow :gutter="10">
          <ACol :span="12">
            <AFormItem
              field="materialName"
              label="产品名称"
              :rules="[{ required: true, message: '请输入产品名称' }]"
              :validate-trigger="['change', 'input', 'blur']"
            >
              <AInput v-model="form.materialName" placeholder="请输入产品名称" />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="materialCategory" label="类别">
              <AInput v-model="form.materialCategory" placeholder="请输入类别" />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="spec" label="规格">
              <AInput v-model="form.spec" placeholder="请输入规格" />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="storageArea" label="存放区">
              <AInput v-model="form.storageArea" placeholder="请输入存放区" />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="stockQty" label="库存数量">
              <AInputNumber
                v-if="(attrs.title as string).includes('新增')"
                v-model="form.stockQty"
                model-event="input"
                placeholder="请输入库存数量"
                hide-button
                :precision="0"
                :step="1"
              />
              <div v-else>{{ form.stockQty }}</div>
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="unitPrice" label="单价">
              <AInputNumber
                v-model="form.unitPrice"
                model-event="input"
                placeholder="单价"
                hide-button
                :precision="4"
                :step="1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="stockWarningQty" label="预警值">
              <AInputNumber
                v-model="form.stockWarningQty"
                model-event="input"
                placeholder="预警值"
                hide-button
                :step="1"
              />
            </AFormItem>
          </ACol>
          <!-- <ACol>
            <AFormItem field="remark" label="备注">
              <ATextarea v-model="form.remark" />
            </AFormItem>
          </ACol> -->
        </ARow>
      </AForm>
    </AModal>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import { editStock, StockReq, StockResItem } from '@renderer/api/warehouseManage'
import { useMenuState } from '@renderer/store'
import { deleteNullObject } from '@renderer/utils/data-processing'

interface Props {
  [key: string]: any
  checkData?: Partial<StockResItem>
}
const props = withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {}
  }
})
const emit = defineEmits(['update:visible', 'reload'])
const attrs = useAttrs()
const formRef = ref()
const form = ref<StockReq>({
  supplierId: '',
  materialName: '',
  materialCategory: '',
  spec: '',
  materialCode: '',
  materialDesc: '',
  fluteType: '',
  boxSpec: '',
  crimpLine: '',
  unit: '',
  storageArea: '',
  materialType: 4,
  stockQty: 0,
  unitPrice: 0,
  remark: '',
  materialStockId: '',
  amount: 0
})
const menuParam = useMenuState()

// 弹窗事件
const modalEvent = (type: string) => {
  switch (type) {
    case 'ok':
      formRef.value.validate((errors: any) => {
        if (!errors) {
          // 新增
          if ((attrs.title as string).includes('新增')) {
            form.value.materialStockId = undefined
          }
          form.value.materialType = 4
          editStock(deleteNullObject(form.value)).then(() => {
            Message.success((attrs.title as string).includes('新增') ? '新增成功' : '修改成功')
            modalEvent('cancel')
            emit('reload')
          })
        }
      })
      break
    case 'close':
      menuParam.switchEditStatus(false)
      formRef.value.resetFields()
      emit('update:visible', false)
      break
    case 'open':
      menuParam.switchEditStatus(true)
      Object.assign(form.value, props.checkData)
      break
    case 'cancel':
      formRef.value.resetFields()
      menuParam.switchEditStatus(false)
      emit('update:visible', false)
      break

    default:
      break
  }
}
</script>
<style scoped></style>
